<template>
  <view class="input-gird" :class="[align, wrapClass]">
    <view class="gird-box">
      <view class="text">
        <view
          class="g_hx"
          :class="{ active: current == index, last: index == max - 1 }"
          v-for="(i, index) in max"
          :key="i"
          @click="onClickGird(index)"
        >
          {{ text[index] || "" }}
        </view>
        <view class="input-box">
          <input
            type="text"
            v-model="val"
            :maxlength="max"
            :max="max"
            class="input"
            :style="inputStyle"
            :cursor="cursor"
            :focus="focus"
            :autoFocus="focus"
            @input="onInput"
            @focus="onFocus"
            @blur="onBlur"
            @click="onFocus"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    max: {
      type: Number,
      default: 6,
    },
    focus: {
      type: Boolean,
      default: true,
    },
    align: {
      default: "center",
    },
    wrapClass: {
      default: "",
    },
  },
  computed: {
    inputStyle() {
      let width = "100%";
      if (this.val) {
        width = "300%";
      }
      return { width };
    },
  },
  data() {
    return {
      text: [],
      val: "",
      current: -1,
      cursor: 0,
    };
  },
  methods: {
    onInput(e) {
      let v = e.data || e.detail ? e.detail.value : "";
      let cursor = e.detail.cursor;
      v += "";
      v = v.trim();
      this.val = v;
      this.current = v.length;
      this.text = (v || "").split("");
      this.$emit("input", v);
      this.$emit("change", v);
      if (v.length >= this.max) {
        this.$emit("finish", v);
      }
      console.log(v.length, "?v.length", this.max);
    },
    onClickGird(index) {
      this.current = index;
    },
    onFocus(e) {
      // this.cursor =
      this.current = this.val.length;
    },
    onBlur() {
      this.current = -1;
    },
  },
  mounted() {
    // let query = uni;
  },
};
</script>

<style lang="stylus" scoped>
@keyframes opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

.input-gird {
  display: flex;
  width: 100%;
  overflow: hidden;

  &.center {
    justify-content: center;
    text-align: center;
  }

  // padding: 0 24rpx;
  >.gird-box {
    flex: 0 1 auto;
    padding: 0 6rpx;
  }

  .text {
    position: relative;
    display: flex;
    height: 96rpx;
    justify-content: center;

    .g_hx {
      position: relative;
      flex: 0 0 96rpx;
      width: 96rpx;
      height: 96rpx;
      line-height: 92rpx;
      // border: #eee solid 2rpx;
	  color:#fff;
      margin-right: 25rpx;
      border-radius: 8rpx;
      text-align: center;
      background: rgba(255, 255, 255, 0.08);

      &.active {
        animation: opacity 2s 0.4s infinite;

        &:after {
          position: absolute;
          content: '';
          height: 50%;
          width: 4rpx;
          background: #666;
          left: 0;
          right: 22%;
          top: 0;
          bottom: 0;
          margin: auto;
          animation: opacity 2s 0.4s infinite;
        }
      }

      &:last-child, &.last {
        margin-right: 0;
      }
    }

    >.input-box {
      position: absolute;
      width: 100%;
      height: 100%;
      line-height: 96rpx;
      top: 0;
      left: 0;
      background: none;
      overflow: hidden;
      opacity: 0;
      padding: 0 2rpx;

      input {
        position: absolute;
        float: left;
        left: -100%;
        width: 200%;
        height: 96rpx;
        line-height: 96rpx;
        letter-spacing: 70rpx;
        text-align: left;
        background: none;
        text-indent: 35rpx;
        opacity: 0;
      }
    }
  }
}
</style>